<template>
	<div class="userinfo">
		<div class="bg"></div>

		<div class="main">
			<el-avatar size="large" :src="`${ENV.VITE_BASE_URL}${userinfo.userinfo.avatar}`" />
			<div class="name">
				<router-link :to="`/userhomepage/${userinfo.userinfo.user_id}`">{{ userinfo.userinfo.nickName }}</router-link>
			</div>
			<div class="user_atten">
				<ul>
					<li>
						<router-link to=""><strong>19</strong><span>关注</span></router-link>
					</li>
					<li>
						<router-link to=""><strong>19099999</strong><span>粉丝</span></router-link>
					</li>
					<li>
						<router-link to=""><strong>19</strong><span>微博</span></router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useUserinfoStore } from "@/stores/userinfo";
const ENV = import.meta.env;
const userinfo = useUserinfoStore();
</script>

<style scoped lang="scss">
.userinfo {
	height: 185px;
	width: 100%;
	background-color: #fff;
}
.bg {
	width: 100%;
	height: 78px;
	background-image: url(https://img.t.sinajs.cn/t5/skin/public/profile_cover/001_s.jpg);
}
.main {
	position: relative;

	.el-avatar {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -40px;
	}
}

.name {
	text-align: center;
	font-weight: 700;
	padding: 20px 0 10px 0;
}
.user_atten > ul {
	display: flex;
	justify-content: space-evenly;

	a {
		display: flex;
		text-align: center;
		flex-direction: column;
		strong {
			font-size: 18px;
		}
		span {
			font-size: 12px;
			color: $deep-grey;
		}
	}
}
</style>
